<template>
   <div>
     <div style="text-align: center">
       <el-input v-model="searchParam.keyword" placeholder="请输入内容" style="width: 400px"></el-input>
       <el-button type="primary" @click="select" >搜索</el-button>
     </div>
     <div>
       <el-breadcrumb separator=">">
         <el-breadcrumb-item>全部结果</el-breadcrumb-item>
         <div v-for="search in searchParam">
           <el-breadcrumb-item><a href="">{{ search }}</a></el-breadcrumb-item>
         </div>
       </el-breadcrumb>
     </div>

     <div>
       <el-table :data="searchResult.attrs" style="width: 100%">
         <el-table-column width="180">
           <template slot-scope="scope">{{ scope.row.attrName }}</template>
         </el-table-column>
         <el-table-column width="180">
           <template slot-scope="scope" >

             <el-button type="primary" @click="selectAttrs(scope.row.attrId,scope.row.attrName,item)" v-for="item in scope.row.attrValue">{{ item }}</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>

       <div  >
         <el-card  v-for="item in searchResult.skuEsModelLists" class="floatLeft">
           <img @click="itemDetails(item.skuId)" src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
           <div style="width: 200px">
             <span @click="itemDetails(item.skuId)" v-html="item.skuTitle"></span>
           </div>
           <div>
             <span style='color:red;font-size: 30px'>￥{{item.skuPrice}}</span>
           </div>
         </el-card>

       </div>
     <div class="clear" style="text-align: center">
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :page-sizes="[5, 10, 15, 20]"
         layout="total, sizes, prev, pager, next, jumper"
         :total="searchResult.total">
       </el-pagination>
     </div>
   </div>

</template>

<script>
import { searchSkuList } from "@/api/producer/skuInfo";

export default {
  name: "SkuInfo",
  data() {
    return {
      searchParam: {},
      searchResult:[],

    };
  },
  created() {
    this.getList();
  },

  methods: {
    /** 查询sku列表 */
    getList() {
      searchSkuList(this.searchParam).then(response => {
        this.searchResult = response.data;
        console.log(this.searchResult)
      })
    },


    itemDetails(skuId){
      this.$router.push({
        path: "/itemDetails",
        query: {skuId : skuId}
      })
    },
    select(){
      this.getList()
    },

    selectAttrs(arrId,attrName,attrValue){
      this.searchParam.attrs = arrId + "_" + attrName + ":" + attrValue
      this.getList()
    },

    handleSizeChange(value){
      this.searchParam.pageSize = value
      this.getList()
    },

    handleCurrentChange(value){
      this.searchParam.pageNum = value
      this.getList()
    }
  }
};
</script>
<style>
  .floatLeft{
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .clear{
    clear:both;
  }
</style>
